<template>
	<view class="layout">
		<view class="top">
			<!-- 导航条 可以设置是否显示 -->
			<!-- 状态栏 -->
			<view clsass="some-background" :style="[{ height: StatusBar + 'px' }, { background: themeBgColor }]" v-if="Object.keys(navObj).length != 0"></view>
			<div v-if="Object.keys(navObj).length != 0" :style="[{ height: navheight + 'px' }, navstyle]">
				<uni-nav-bar
					:left-icon="leftIcon"
					:dark="pattern"
					:title="navObj.title || ''"
					@clickLeft="backButton"
					style="width: 100%; height: 100%"
					:height="navheight"
					:border="false"
					:backgroundColor="navbackgroundColor"
					:style="[{ background: navbackgroundColor }]"
					:color="this.theme ? '#000000' : '#ffffff'"
				/>
			</div>
			<!-- 只有一个返回按钮的导航 -->
			<view :style="[{ height: navheight + 'px' }, { top: StatusBar + 'px' }]" class="returnButton" v-if="back">
				<uni-icons
					class="back"
					type="back"
					size="20"
					@click="backButton"
					color="#fff"
					:style="{ 'margin-left': rights ? 'calc(100vw - ' + rights + 'px' + ')' : '10px' }"
				></uni-icons>
			</view>
			<slot name="top"></slot>
		</view>
		<view class="medi">
			<slot name="medi"></slot>
		</view>
		<view class="bottom">
			<slot name="bottom"></slot>
			<view :style="[{ height: bottomSafeHeight + 'px' }, { background: navbackgroundColor || nacBackColor }]" v-if="safeArea"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			StatusBar: this.StatusBar, //状态栏高度
			navheight: this.navheight, //导航条高度
			bottomSafeHeight: this.bottomSafeHeight, //安全区域高度
			subject: this.subject, //主题的样式
			navstyle: {}, //导航栏的样式,APP中根据主题定义的
			rights: 0,
			pattern: this.theme == 'light' ? false : true, //导航栏是否为暗黑
			nacBackColor: '' //导航栏背景色
		};
	},
	mounted() {
		this.navstyle = this.subject.navstyle;
		this.nacBackColor = this.navbackgroundColor;
		// console.log(this.navstyle, 'ssss');
		if (this.Custom) {
			this.rights = this.Custom.right;
		}
		if (!this.navbackgroundColor) {
			if (this.pattern) this.nacBackColor = '#333';
			else this.nacBackColor = '#fff';
		}
		uni.setNavigationBarColor({
			frontColor: this.theme ? '#000000' : '#ffffff'
		});
	},
	props: {
		// //导航栏背景色
		navbackgroundColor: {
			type: String,
			default: ''
		},
		// 控制导航条
		navObj: {
			type: Object,
			default: () => {
				return {};
			}
		},
		// 是否显示头部返回按钮（固定在导航条上的）
		back: {
			type: Boolean,
			default: false
		},
		// 是否显示安全区
		safeArea: {
			type: Boolean,
			default: false
		},
		// 导航栏返回图标
		leftIcon: {
			type: String,
			default: 'left'
		}
	},
	methods: {
		backButton() {
			uni.navigateBack();
		}
	},
	computed: {
		themeBgColor() {
			// console.log(this.navbackgroundColor, 'this.navbackgroundColor');
			if (this.navbackgroundColor) {
				return this.navbackgroundColor;
			} else {
				return this.theme == 'light' ? '#fff' : '#333';
			}
		}
	}
};
</script>

<style lang="less" scoped>
.layout {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;

	.top {
		width: 100%;
		box-sizing: border-box;
		position: relative;

		div {
			display: flex;
			align-items: center;
			box-sizing: border-box;
		}
	}

	.medi {
		width: 100%;
		flex: 1;
		position: relative;
		// box-sizing: border-box;
		overflow-y: scroll;
	}

	.bottom {
		width: 100%;
		box-sizing: border-box;
	}
}

.returnButton {
	position: fixed;
	left: 0px;
	right: 0px;
	z-index: 10;
	display: flex;
	align-items: center;
	box-sizing: border-box;

	.back {
		padding: 5px;
		border-radius: 50%;
		border: 1px solid #ffffff;
		color: #fff;
		background-color: #fff;
		margin-left: calc(100vw - xxx);
		background-color: transparent;
	}
}
</style>
